<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>MVC DOH Test</title>

		<style>
			@import "../../../../dojo/resources/dojo.css";
			@import "../../../../dijit/tests/css/dijitTests.css";
			@import "../css/app-format.css";
		</style>

		<!-- required: the default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css">

		<!-- required: dojo.js -->
		<script src="../../../../dojo/dojo.js" type="text/javascript" data-dojo-config="isDebug: 1, parseOnLoad: 0, async: 1"></script>
		<script type="text/javascript" src="./helpers.js"></script>

		<script type="text/javascript">
			require([
				"doh/runner",
				"dojo/parser",
				"dojo/when",
				"dojo/Stateful",
				"dijit/registry",
				"dojox/mvc/sync",
				"dijit/form/TextBox",
				"dijit/form/NumberTextBox",
				"dijit/form/ValidationTextBox",
				"dijit/form/Button",
				"dojox/mvc/Output"
			], function(doh, parser, when, Stateful, registry, sync){
				model = new Stateful({
					First: "John",
					Last: "Doe",
					Email: "jdoe@example.com",
					Num: 3
				});
				model2 = new Stateful({
					First: "John2",
					Last: "Doe2",
					Email: "jdoe2@example.com",
					Num: 2
				});
				model3 = new Stateful({
					First: "",
					Last: "",
					Email: "",
					Num: 3
				});
				model4 = new Stateful({
					First: "John4",
					Last: "Doe4",
					Email: "jdoe4@example.com",
					Num: 4
				});
				model5 = new Stateful({
					First: "",
					Last: "",
					Email: "",
					Num: 5
				});

				function noParse(){
					throw new Error();
				}

				readOnlyConverter = {
					format: function(value){
						return value === "2" || value === "3";
					},
					parse: noParse
				};

				relevanceConverter = {
					format: function(value){
						return value !== "0";
					},
					parse: noParse
				};

				numValidConverter = {
					format: function(value){
						return value !== "3" && !(value - 0 === 1);
					},
					parse: noParse
				};

				emailConverter = {
					format: function(value){
						return value + "formatted";
					},
					parse: noParse
				};

				requiredConverter = {
					format: function(value){
						return value - 0 === 4;
					},
					parse: noParse
				};

				lastValidConverter = {
					format: function(value){
						return value !== "1";
					},
					parse: noParse
				};

				when(parser.parse(), function(){
					doh.register("Check sync values from 2 to 3", [{
						name: "Initial",
						runTest: function(){
							// sync test
							var firstx2 = "";
							sync(model2, "First", model3, "First");							
							doh.is("John2", model3.get("First"), "model3.First should be John2");
							// set model3.First should update model2.First
							model3.set("First", "Billy3");
							doh.is("Billy3", model2.get("First"), "model2.First should now be Billy3");

							sync(model2, "Last", model3, "Last", {bindDirection:sync.from});							
					//		sync(model2, "Last", model3, "Last", {bindDirection:sync.to});							
							doh.is("Doe2", model3.get("Last"), "model3.Last should be Doe2");
							// set model3.Last should NOT update model2.Last
							model3.set("Last", "Billy3");
							doh.is("Doe2", model2.get("Last"), "model2.Last should still be Doe2");

							sync(model2, "Num", model3, "Num", {bindDirection:sync.to});							
							doh.is(3, model2.get("Num"), "model2.Num should be 3");
							doh.is(3, model3.get("Num"), "model3.Num should be 3");
						}
					}, {
						name: "TestSyncWildCard",
						runTest: function(){
							sync(model4, "*", model5, "*");							
							doh.is("John4", model5.get("First"), "model5.First should be John4");
							doh.is("Doe4", model5.get("Last"), "model5.Last should now be Doe4");
							// set model5.Last should update model4.Last
							model5.set("Last", "Upate5");
							doh.is("Upate5", model4.get("Last"), "model4.Last should be Upate5");
						}
					}, {
						name: "TestSyncConverter",
						runTest: function(){
							sync(model2, "Email", model3, "Email", {converter : emailConverter});							
							doh.is("jdoe2@example.comformatted", model3.get("Email"), "model3.Email should be jdoe2@example.comformatted");
							model2.set("Email", "Em2");
							doh.is("Em2formatted", model3.get("Email"), "model3.Email should be Em2formatted");
						//	doh.is("Doe4", model5.get("Last"), "model5.Last should now be Doe4");
						}
					}]);

					doh.run();
				});
			});
		</script>
	</head>
	<body class="claro">
		<script type="dojo/require">at: "dojox/mvc/at"</script>
		<div id="wrapper">
			<div id="header">
				<div id="navigation"></div>
				<div id="headerInsert">
					<h1>Binding Tests</h1>
				</div>
			</div>
			<div id="main">
				<div id="leftNav">
				</div>
				<div id="mainContent">
					<h2>Bind Self Tests</h2>
					<div class="row">
						<label class="cell" for="firstnameInput">Model2 First:</label>
						<input class="cell" id="firstnameInput" data-dojo-type="dijit.form.ValidationTextBox"
						 data-dojo-props="value: at(model2, 'First')">
						<!-- Content in output below will always be in sync with value of textbox above -->
						First name is: <span id="tout" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model2, 'First')"></span>
					</div>
					<div class="row">
						<label class="cell" for="firstnameInput3">Model3 First:</label>
						<input class="cell" id="firstnameInput3" data-dojo-type="dijit.form.ValidationTextBox"
						 data-dojo-props="value: at(model3, 'First')">
						<!-- Content in output below will always be in sync with value of textbox above -->
						First name is: <span id="tout3" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model3, 'First')"></span>
					</div>
					<div class="row">
						<label class="cell" for="lastnameInput">Model2 Last:</label>
						<input class="cell" id="lastnameInput" data-dojo-type="dijit.form.ValidationTextBox"
						 data-dojo-props="value: at(model2, 'Last')">
						<!-- Content in output below will always be in sync with value of textbox above -->
						Last name is: <span id="lasttout" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model2, 'Last')"></span>
					</div>
					<div class="row">
						<label class="cell" for="lastnameInput3">Model3 Last:</label>
						<input class="cell" id="lastnameInput3" data-dojo-type="dijit.form.ValidationTextBox"
						 data-dojo-props="value: at(model3, 'Last')">
						<!-- Content in output below will always be in sync with value of textbox above -->
						Last name is: <span id="lasttout3" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model3, 'Last')"></span>
					</div>
					<div class="row">
						<label class="cell" for="emailInput2">Email:</label>
						<input class="cell" id="emailInput2" data-dojo-type="dijit.form.ValidationTextBox"
						 data-dojo-props="value: at(model2, 'Email')">
						Model2 Email is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model2, 'Email')"></span>
					</div>
					<div class="row">
						<label class="cell" for="emailInput3">Email:</label>
						<input class="cell" id="emailInput3" data-dojo-type="dijit.form.ValidationTextBox"
						 data-dojo-props="value: at(model3, 'Email')">
						Model3 Email is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model3, 'Email')"></span>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
